<template>
  <div class="footer-button">
    <div class="type1" v-if="type == 'one'">
      <van-button type="primary" round :color="color">{{ title }}</van-button>
    </div>
    <div class="type2" v-if="type == 'two'">
      <slot></slot>
      <van-button type="primary" round :color="color">{{ title }}</van-button>
      <van-button type="primary" round :color="color1">{{ title1 }}</van-button>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    type: {
      type: String,
      default: "one",
    },
    title: String,
    color: String,
    title1: String,
    color1: String,
  },
};
</script>

<style lang="scss" scoped>
.footer-button {
  background: #ffffff;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.5);
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 102px;
  ::v-deep(.van-button) {
    width: 332px;
    height: 44px;
    margin-top: 15px;
    margin-left: 27px;
  }
  .type2 {
    display: flex;
    padding: 0 16px;
  }
}
</style>
